<template>
  <div id="deferdialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :isshowconfirmbtn="false"
      :dialogWidth="'40%'"
      :enterTitle="false"
      :isshowimportTitle="false"
      :dialogTitle="`暂缓建档-${titlename}`"
      @closetextDialog="closetextDialog"
      @confirmbtn='confirmbtn'
      :topHeight='"25vh"'
    >

    <!-- 表单区域 -->
    <div class="defertitle">请选择暂缓原因</div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
  <el-form-item label-width="0" prop="reason">
    <el-checkbox-group v-model="formData.reason" size="medium">
      <el-checkbox v-for="(item, index) in deferOption" :key="index" :label="item.id"
        :disabled="item.disabled">{{item.title}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>

</el-form>


    </commonformdialog>
  </div>
</template>

<script>
//引入弹窗
import commonformdialog from '@/components/commondialog/commondialog'
import {getSessionStorage} from '@/utils/accessToken'
//api
import {studentrecord} from '@/api/student'
export default {
  data() {
    return {
    //标题名字
    titlename:'',
    //学员id
    studentId:'',
    //选项
    deferOption:[],
    //表单数据
    formData: {
        reason: [],
      },
      rules: {
        reason: [{
          required: true,
          type: 'array',
          message: '请至少选择暂缓原因',
          trigger: 'change'
        }],
      }
    }
  },
  components: {
    commonformdialog,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
    },
    //点击传递的参数
    dialogparams:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  methods:{
      //关闭弹窗
    closetextDialog() {
      this.$refs['elForm'].resetFields()
      this.$emit('closedefer')
    },
    //点击确认
    confirmbtn(){
        this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        let params = {
          student_id:this.studentId,
          reason:this.formData.reason.join(','),
          type:2,
           _request:2
        }
        let data = await studentrecord(params)
        if(data.code=='0000'){
           this.$message.success('暂缓成功！')
           this.$emit('confirm')
           this.$refs['elForm'].resetFields()
        }
      })

    }
  },
  watch:{
     dialogparams(val){
       this.titlename = val.name
       this.studentId = val.id
     }
  },
  mounted(){
       //获取暂缓建档数据
      this.deferOption = getSessionStorage('Options')[23]
  }
}
</script>

<style scoped lang='scss'>
.defertitle{
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}
::v-deep{
    .el-checkbox-group{
        .el-checkbox{
            width: 108px;
        }
    }
}
</style>
